<!-- 订单管理-客户订单-销售订单 -->
<template>
  <div>
    <TableTurn :table-data="getData" ref="tableRef" :isShowPagination="false">
      <a-table-column :width="80" align="center">
        <template #title> 序号 </template>
        <template #cell="{ rowIndex }">
          {{ rowIndex + 1 }}
        </template>
      </a-table-column>
      <a-table-column align="center" title="物料编码" data-index="number">
      </a-table-column>
      <a-table-column align="center" title="物料名称" data-index="name">
      </a-table-column>
      <a-table-column align="center" title="规格型号" data-index="spec">
      </a-table-column>

      <a-table-column
        align="center"
        title="物料指导单价"
        data-index="salesPrice"
      >
      </a-table-column>
      <a-table-column align="center" title="折扣（%）" data-index="code">
        <template #cell="{ record }">
          <span>{{ record.discount }}%</span>
        </template>
      </a-table-column>
      <a-table-column align="center" title="需求数量" data-index="amount">
      </a-table-column>
      <a-table-column align="center" title="合计" data-index="totalPrice">
      </a-table-column>
    </TableTurn>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref, computed, onMounted } from 'vue';
  import { useRouter, useRoute } from 'vue-router';
  import dayjs from 'dayjs';
  import { GetOrderfiles } from '@/api/order-management/client-order';

  const router = useRouter();
  const route: any = useRoute();
  // let content = JSON.parse(route.query.record);
  const id = Number(route.query.id);

  // 获取对应列表信息
  const getData = async () => {
    try {
      const res = await GetOrderfiles({
        id,
        fileDetailsType: 2,
      });
      return Promise.resolve(res);
    } catch (err: unknown) {
      console.log(err);
    }
  };
</script>

<style scoped lang="less">
  .sales-order {
    .use-state {
      display: flex;
      justify-content: center;
      text-align: center;
      .cycle {
        position: relative;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        content: '';
        display: inline-block;
        top: 3px;
        right: 10px;
      }
    }

    // 待提交、待审核、已完成
    .greyColor {
      color: #c9cdd4;
    }
    .greyColor-cycle {
      background-color: #c9cdd4;
    }

    // 审核中、执行中
    .blueColor {
      color: #156dff;
    }
    .blueColor-cycle {
      background-color: #156dff;
    }

    // 已通过
    .greenColor {
      color: #31c273;
    }
    .greenColor-cycle {
      background-color: #31c273;
    }

    // 不通过
    .orangeColor {
      color: #fc6;
    }
    .orangeColor-cycle {
      background-color: #fc6;
    }
  }
</style>
